<script setup lang="ts">
import { ref } from 'vue'
import { indexApi } from '../../../services/index'
import type { BannerItemType } from '@/services/type'
const bannerData = ref<BannerItemType[]>([])
interface Props {
  bannerData: BannerItemType[]
}
const props = defineProps<Props>()
// console.log(props.bannerData)

// indexApi().then((res)=>{
//   console.log(res)
//   if(res.data&&res.data.blocks&&res.data.blocks[0]&&res.data.blocks[0].extInfo){
//     bannerData.value = res.data.blocks[0].extInfo.banners
//   }
// })
</script>

<template>
  <div class="banners">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item class="swiper-item" v-for="item in props.bannerData" :key="item.pic">
          <image :src="item.pic" mode="widthFix"></image>
				</swiper-item>
			</swiper>
  </div>
</template>

<style scoped lang="scss">
.banners{
  width: 100%;
  .swiper{
    padding:30rpx;
    height: 268rpx;
    display: flex;
    justify-content: center;
    .swiper-item{
      image{
        width:100%;
      }
    }
  }
  
}
</style>